<template>
    <div class="content">
        <div class="form_box">
            <el-form :model="requires" :rules="requires_rules" ref="requires" label-width="220px">
                <div class="pa_title">
                    <h3 class="title">申请成为版权云合作伙伴</h3>
                    <p>欢迎加入版权云合作伙伴计划，请留下公司信息和联系方式，我们将会有专员与您洽谈！</p>
                </div>
                <div class="form_width">
                    <el-form-item label="公司名称：" prop="product_name">
                        <el-input v-model="requires.product_name" style="width: 350px;"></el-input>
                    </el-form-item>
                    <el-form-item label="公司性质：" prop="product_type">

                        <el-select v-model="requires.product_type" style="width: 350px;" placeholder="请选择">
                            <el-option v-for="item in product_type" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="公司网址：" prop="product_url">
                        <el-input v-model="requires.product_url" style="width: 350px;"></el-input>
                    </el-form-item>
                    <el-form-item label="公司地址：" prop="product_site">
                        <el-input v-model="requires.product_site" style="width: 350px;"></el-input>
                    </el-form-item>
                    <el-form-item label="公司主营业务：" prop="product_site">
                        <el-input v-model="requires.product_site" type="textarea" style="width: 350px;"></el-input>
                    </el-form-item>
                    <el-form-item label="联系人：" prop="product_site">
                        <el-input v-model="requires.product_site" style="width: 350px;"></el-input>
                    </el-form-item>
                    <el-form-item label="联系人电话：" prop="product_site">
                        <el-input v-model="requires.product_site" style="width: 350px;"></el-input>
                    </el-form-item>
                    <el-form-item label="联系人邮箱：" prop="product_site">
                        <el-input v-model="requires.product_site" style="width: 350px;"></el-input>
                    </el-form-item>

                </div>
            </el-form>
            <div class="form_next">
                <el-button type="primary" @click="requiresAddFn">提交</el-button>
            </div>
        </div>
    </div>
</template>
<script>
import util from "@/assets/js/util.js"; // 时间格式化
import { submitfile, requiresAdd } from "@/api";
import { mapState, mapMutations } from "vuex";
function formatData(data) {
    var result = [];
    for (var key in data) {
        result.push({
            value: key
        });
    }
    return result;
}
export default {
    data() {
        return {
            // btnVisible: true,
            // 上传地址
            uploadUrl: submitfile,
            imageUrl: "",
            fileInfo: {
                require_guishuzhengming: {
                    type: "pic",
                    foler: "require_guishuzhengming"
                },
                require_weituoshu: {
                    type: "pic",
                    foler: "require_weituoshu"
                },
                require_zhengbanyangpin: {
                    type: "pic",
                    foler: "require_zhengbanyangpin"
                }
            },

            fileList: {
                product_belong_certif: [], // 作者身份证文件
                rightowner_proxy: [], // 著作权人身份证文件
                product_simple: [] // 说明书文件
            },

            requires: {
                product_name: "", // 作品名称
                product_type: "", // 作品类型
                product_url: "",
                product_site: "",
                requires_range: [],
                // channel: [],
                start_time: "",
                end_time: "",
                product_belong_certif: "",
                rightowner_proxy: "",
                product_simple: "",
                daterange: ""
            },
            requires_rules: {
                daterange: [{ required: true, message: "请选择监测周期" }]
            },

            // 作品类型选项
            product_type: [
                {
                    value: 1,
                    label: "事业单位"
                },
                {
                    value: 2,
                    label: "国企"
                },
                {
                    value: 3,
                    label: "民营"
                }
            ],
            pickerOptions: {
                shortcuts: [
                    {
                        text: "最近一周",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 7
                            );
                            picker.$emit("pick", [start, end]);
                        }
                    },
                    {
                        text: "最近一个月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 30
                            );
                            picker.$emit("pick", [start, end]);
                        }
                    },
                    {
                        text: "最近三个月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 90
                            );
                            picker.$emit("pick", [start, end]);
                        }
                    }
                ]
            }
        };
    },
    computed: {
        ...mapState([
            'croUser',
        ]),
    },
    methods: {
        ...mapMutations([
            'OUT_LOGIN',
        ]),
        // 作品归属证明
        require_guishuzhengmingSuccess(res, file) {
            if (res.data) {
                this.requires.require_guishuzhengming = res.data;
            } else {
                this.$message({
                    message: res.msg,
                    type: "error"
                });
            }
        },
        require_guishuzhengmingUpload(file) {},
        require_guishuzhengmingExceed(files, fileList) {
            this.$message.warning(`只能上传1个文件`);
        },

        // 著作权人委托书
        require_weituoshuSuccess(res, file) {
            if (res.data) {
                this.requires.require_weituoshu = res.data;
            } else {
                this.$message({
                    message: res.msg,
                    type: "error"
                });
            }
        },
        require_weituoshuUpload(file) {},
        require_weituoshuExceed(files, fileList) {
            this.$message.warning(`只能上传1个文件`);
        },

        // 作品正版样本：
        require_zhengbanyangpinSuccess(res, file) {
            if (res.data) {
                this.requires.require_zhengbanyangpin = res.data;
            } else {
                this.$message({
                    message: res.msg,
                    type: "error"
                });
            }
        },
        require_zhengbanyangpinUpload(file) {
            console.log(this.fileList);
        },
        require_zhengbanyangpinExceed(files, fileList) {
            this.$message.warning(`只能上传1个文件`);
        },

        dateChange(val) {
            // 2017-10-03 - 2017-10-04
            this.requires.start_time = val[0] =
                !val[0] || val[0] == ""
                    ? ""
                    : util.formatDate.format(new Date(val[0]), "yyyy-MM-dd");
            this.requires.end_time = val[1] =
                !val[1] || val[1] == ""
                    ? ""
                    : util.formatDate.format(new Date(val[1]), "yyyy-MM-dd");
            console.log(this.requires);
        },
        requiresAddFn() {
            this.$refs.requires.validate(valid => {
                if (valid) {
                    let para = Object.assign({}, this.requires);
                    para.user_id = this.croUser.user_id;
                    requiresAdd(para).then(res => {
                        if (res.data) {
                            this.$refs.requires.resetFields();
                            this.fileList = {
                                product_belong_certif: [], // 作者身份证文件
                                rightowner_proxy: [], // 著作权人身份证文件
                                product_simple: [] // 说明书文件
                            };
                            this.$message.success(res.msg);
                        } else if(res.tologin) {
                            this.OUT_LOGIN();
                            this.$router.push('/login');
                        }else {
                            this.$message.error(res.msg);
                        }
                    });
                }
            });
        },
        // 重置
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    },
    mounted() {
    }
};
</script>
<style lang="scss" scoped>
.content {
    width: 100%;
    margin: 0px auto;
    box-sizing: border-box;
    padding: 15px;
    background: #f2f2f2;
    font-size: 14px;
}

.content h4 {
    font-size: 16px;
    // font-weight: normal;
}

.content h4 > span {
    font-size: 12px;
    font-weight: normal;
    padding-left: 25px;
}

/* hr */
.content .hr {
    position: relative;
    top: 0;
    left: 0;
    height: 50px;
    border-top: 1px solid #c6c6c6;
    margin-top: 20px;
    font-size: 17px;
}

.content .hr > p {
    position: relative;
    top: -17px;
    left: 0;
    width: 300px;
    height: 40px;
    line-height: 35px;
    text-align: center;
    border: 1px solid #c6c6c6;
    border-radius: 3px;
    box-sizing: border-box;
    margin: 0 auto;
    background: #fff;
}

.form_box {
    border: 1px solid #e9e9e9;
    width: 1200px;
    margin: 0 auto;
    padding: 15px 15px 30px 15px;
    background: #fff;
}

.form_box .h3 {
    font-size: 16px;
    font-weight: normal;
    padding: 15px 0 25px 0;
}

.el-checkbox-group .el-checkbox {
    padding: 0px 15px 0px 0;
}

.el-radio-group .el-radio {
    padding-right: 15px;
    line-height: 36px;
}

.el-checkbox + .el-checkbox,
.el-radio + .el-radio {
    margin: 0;
}

.form_next {
    text-align: center;
    padding: 25px 0;
}

.form_width {
    width: 650px;
    margin-left: 250px;
}
.pa_title {
    width: 1000px;
    margin: 30px auto;
    border-bottom: 1px solid #ccc;
    h3 {
        font-size: 20px;
    }
    p {
        font-size: 14px;
        color: #999;
        padding: 20px 0;
    }
}
</style>
